<script setup lang="ts">
    import { ref, onMounted, watch, provide } from 'vue' //导入vue函数
    import type { Category, Goods } from '@/model'//导入自定义数据类型
    import { getCategoryList, getGoodsList } from '@/api' //导入axio接口
    import GoodsPanel from '@/components/GoodsPanel.vue' //引入公用自定义组件
    import GoodsDetails from '@/components/GoodsDetails.vue' //引入公用自定义组件
    import { useToken } from '@/stores/token' //导入token状态文件
    import { useRouter } from "vue-router" //导入路由的useRouter函数

    //执行方法获得tokenStore对象
    const tokenStore = useToken()

    //创建router对象
    const router = useRouter()

    //当前分类编号
    const params = defineProps(["id"])

    //当前分类所有子分类数据对象
    const categoryList = ref<Category[]>([])

    //定义商品数据对象
    const goodsList = ref<Goods[]>([])

    //是否显示商品详情
    const isShowDetails = ref(false)
    //定义商品详情数据对象
    const goodsDetails = ref()
    //通过provide实现跨组件通信
    provide("isShowDetails", isShowDetails) //商品详情组件是否显示

    //获得当前分类所有子分类
    async function getCategory(){
        const res = await getCategoryList()
        categoryList.value = res.data.data.filter((value:Category)=>value.pid==params.id)
    }

    //获得所有商品列表
    async function getGoods(){
        const res = await getGoodsList()
        goodsList.value = res.data.data.filter((value:Goods)=>value.category_id!=38)
    }

    //显示商品详情
    function showGoodsDetails(goods:Goods){
        if(tokenStore.token){
            goods.discount = 1 //设置商品折扣
            goods.num = 1 //设置商品数量
            goodsDetails.value = goods //传递商品详情信息
            isShowDetails.value = true //显示商品详情组件
        }
        else{
            //跳转到登录页面
            router.push("/login")
        }
    }

    //页面组件加载完成
    onMounted(()=>{
        getCategory()
        getGoods()
    })

    //侦听params参数变化
    watch(params,()=>{
        getCategory()
    })
</script>

<template>
    <!--引入子组件-->
    <GoodsPanel v-for="category in categoryList" :title="category.name">
        <div class="goodsItem" v-for="goods in goodsList.filter((value:Goods)=>value.category_id==category.id)" @click="showGoodsDetails(goods)">
            <div>
                <img :src="goods.picture" />
            </div>
            <div><el-text truncated>{{ goods.name }}</el-text></div>
            <!--注：replace用于过滤HTML代码-->
            <div><el-text truncated>{{ goods.description.replace(/<\/?[^>]+(>|$)/g, "") }}</el-text></div>
            <div>￥{{ goods.price.toFixed(2) }}</div>
        </div>
    </GoodsPanel>

    <!--引入商品详情组件-->
    <GoodsDetails :item="goodsDetails"></GoodsDetails>
</template>

<style scoped>
    .goodsItem{
        width:200px;
        border-radius: 5px;
        transition: all 0.3s ease;
        margin-bottom: 20px;
        margin-right:40px;
    }
    .goodsItem:hover{
        box-shadow: 0px 3px 5px 5px lightgray;
        transform: translateY(-5px);
    }
    .goodsItem > div{
        text-align:center;
    }
    .goodsItem > div:nth-child(1){
        text-align: center;
        margin:20px auto 0px auto;
    }
    .goodsItem > div:nth-child(2){
        width:180px;
        margin:10px auto 0px auto;
    }
    .goodsItem > div:nth-child(2) .el-text{
        color:black;
    }
    .goodsItem > div:nth-child(3){
        width:180px;
        margin:5px auto 0px auto;
    }
    .goodsItem > div:nth-child(3) .el-text{
        font-size:13px;
    }
    .goodsItem > div:nth-child(4){
        font-size:20px;
        color:#CF4444;
        margin-bottom:10px;
    }
    .goodsItem img{
        width:150px;
        height:150px;
    }
</style>
